<template>
  <div class="wrap">
<!--    <div class="d-flex align-items-center">-->
<!--      <query-list-->
<!--              :tipMsg="$t('message.ElementLibrary.pickNoteTip')"-->
<!--              :active=1>-->
<!--      </query-list>-->
<!--    </div>-->
    <!--库列表-->
    <div class="d-flex align-items-center">
      <!--  要素库-库列表  -->
      <!--        <ElementLibraryLib :selected-item="selectItem"/>-->
      <label class="el-form-item__label">{{$t('message.ElementLibrary.title')}}：</label>
      <el-select class="flex-grow-1" v-model="selectItem" value-key="id" @change="changeSelect">
        <el-option v-for="item in elementLibraryManager.elementLibraryItems"
                   :key="item.id"
                   :label="item.name"
                   :value="item">

        </el-option>
      </el-select>
    </div>
    <div class="d-flex align-items-center">
      <p><b>{{ $t('message.ElementLibrary.property') }}</b></p>
    </div>
    <div v-for="(property,key) in propertyList" :key="key" class="d-flex align-items-center">
      <label class="el-form-item__label property-name-label">{{ property.name }}：</label>
      <el-select class="noBorder" v-model="property.selectValue" ref="propertySelect">
        <el-option>
          <el-button type="text" @click="deleteSelect(property)">{{ $t('message.ElementLibrary.clearData') }}</el-button>
        </el-option>
        <el-option v-for="(item,index) in property.value"
                   :key=index
                   :label="item"
                   :value="item">

        </el-option>
<!--        <el-option>-->
<!--          <el-button type="text" icon="el-icon-menu" @click="addValue(scope.row)">-->
<!--            {{$t('message.ElementLibrary.new')}}-->
<!--          </el-button>-->
<!--        </el-option>-->
      </el-select>
    </div>
    <div v-if="isSearch">
      <div class="d-flex align-items-center el-form-item__label">
        <p><b>{{ $t('message.ElementLibrary.searchResult') }}</b></p>
      </div>
      <div :class="['dialog-query-list', 'list-normal']">
        <div class="query-description el-form-item__label" v-if="modelList.length === 0">
          {{$t('message.ElementLibrary.searchTip')}}
        </div>
        <ul v-else class="result-list text-color1">
          <li :key="item.id"
              v-for="item in modelList"
              @click="changeSelectItem(item)">
            <div :class="['result-item', item.selectStatus ? 'selected-query-li' : '']">
              <span class="result-item-title text-ellipsis" :title="item.name">{{item.name}}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="btn">
      <el-button type="primary" size="small" @click="search">
        {{ $t('message.ElementLibrary.search') }}
      </el-button>
      <el-button type="primary" size="small" :disabled="(selectModelItem === null)" @click="insert">
        {{ $t('message.ElementLibrary.insert') }}
      </el-button>
      <el-button size="small" @click="close">
        {{ $t('message.Common.close') }}
      </el-button>
    </div>
  </div>
</template>
<script>
  import DialogMixin from "../DialogMixin";
  import elementLibraryManager from "./js/ElementLibraryManager";
  import {elementLibraryCmd} from "../../../Command/ElementLibrary/ElementLibraryCommand";

  export default {
    mixins: [DialogMixin],
    data() {
      return {
        elementLibraryManager,
        selectItem: null,
        propertyList: [],
        modelList: [],
        selectModelItem: null,
        isSearch: false,
      }
    },
    created() {

    },
    beforeDestroy() {

    },
    methods: {
      changePluginContainerHeight() {
        elementLibraryCmd.changePluginContainerHeight({minWidth: this.$el.clientWidth, maxHeight: this.$el.clientHeight})
      },
      getPropertiesByLibraryId() {
        this.propertyList.splice(0);
        let params = {
          cmdName: 'getElementLibraryPropertyByLibraryId',
          libraryId: this.selectItem?.id,
        }
        elementLibraryCmd.executeElementLibraryCommand(params, res => {
          res?.forEach(data => {
            let tempProp = this.propertyList.filter(prop => prop.name === data.name);
            if (tempProp.length === 0) {
              this.propertyList.push(data);
            }
          })
        });
      },
      changeSelect() {
        this.isSearch = false;
        this.selectModelItem = null;
        if (!this.selectItem) {
          return;
        }
        this.getPropertiesByLibraryId();
      },
      changeSelectItem(item) {
        this.modelList?.forEach(model => {
          model.selectStatus = false;
        })
        item.selectStatus = true;
        this.selectModelItem = item;
      },
      deleteSelect(property) {
        property.selectValue = null;
      },
      search(){
        this.isSearch = true;
        let properties = "";
        this.modelList.splice(0);
        this.propertyList?.forEach(property => {
          if (property.selectValue) {
            if (properties.length > 0) {
              properties += ",";
            }
            let propertyStr = property.name + ":" + property.selectValue;
            properties += propertyStr;
          }
        })
        let params = {
          cmdName: 'getModelsByLibraryIdAndProperties',
          libraryId: this.selectItem?.id,
          properties: properties,
        }
        elementLibraryCmd.executeElementLibraryCommand(params, data => {
          data?.forEach(model => {
            model.selectStatus = false;
            this.modelList.push(model)
          })
        });
      },
      insert() {
        if (this.selectModelItem) {
          if (this.selectModelItem?.param?.parametricTableId) {
            // 调用知识库提供的插入
            elementLibraryManager.insert(this.selectModelItem);
          } else {
            let params = {
              modalParam:{
                // knowledgeId: this.templateParams.id,
                // templateId: this.templateParams.param.templateId,
                insertPos: new THREE.Vector3(),
                // parametricTableId: this.templateParams.param.parametricTableId
              },
              elementItem:this.selectModelItem,
            }
            elementLibraryCmd.executeInsertLibPartCommand(params,result =>{
              //this.close();
            })
          }
        }
      },
      close(){
        elementLibraryCmd.closeActiveCmd();
      },
    },
    mounted() {
      elementLibraryCmd.init(500, 260, 500, () => {
        elementLibraryManager.initElementLibrary(items => {
          if (items && items.length > 0) {
            this.selectItem = items[0];
            this.getPropertiesByLibraryId();
          }
        });
      });
    },
  }
</script>

<style scoped>
  .wrap {
    font-size: 12px;
  }

  .selected-query-li {
    border-radius: 3px;
    background-color: var(--bg-color3);
  }

  .query-description {
    height: 24px;
    font-size: 12px;
    line-height: 24px;
    display: flex;
    justify-content: space-between;
    margin-left: 10px;
    margin-top: 3px;
  }

  .property-name-label {
    width: 40%;
  }
</style>